<!-- 5S检查列表 -->
<template>
	<view class="content">

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<u-navbar :fixed="false" :title="titleName" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff">
					<view slot="right">
						<uni-icons fontFamily="CustomFontPlatform" :size="22" color="#fff"
							@click="showFilter=true">{{$utils.toUniCode('&#xe811;')}}</uni-icons>
					</view>
				</u-navbar>
			</template>

			<view class="MainBox">
				<view class="content_main_CardBox" v-for="(item,index) in dataList" :key="item.DailyFSID"
					style="margin-bottom: 10rpx;" @click="intoRow(item)">
					<view class="x-bc">
						<view class="formBox" style="flex: 1;">
							<view class="FiledBox">
								<text class="FiledBox_label_f24 FiledBox_grifola">检查日期:</text>
								<text class="FiledBox_value FiledBox_value_f24 FiledBox_grifola">{{item.CDate}}</text>
							</view>
							<view class="FiledBox">
								<text class="FiledBox_label_f24 FiledBox_grifola">受检单位:</text>
								<text
									class="FiledBox_value FiledBox_value_f24 FiledBox_grifola">{{item.ClassName}}</text>
							</view>
							<view class="FiledBox">
								<text class="FiledBox_label_f24 FiledBox_grifola">制单人员:</text>
								<text class="FiledBox_value FiledBox_value_f24 FiledBox_grifola">{{item.Creater}}</text>
							</view>
							<view class="FiledBox">
								<text class="FiledBox_label_f24 FiledBox_grifola">制单时间:</text>
								<text
									class="FiledBox_value FiledBox_value_f24 FiledBox_grifola">{{item.CreateTime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<template #bottom>
				<view class="bottomTool x-bc" :style="$utils.disposeSafeBottomFun()">
					<view class="operTotal">
						<view class="FiledBox" style="width: fit-content;">
							<text class="FiledBox_grifola">
								<text>共计笔数</text>
								<text style="margin: 0 4px;">{{totalCount}}</text>
								<text>笔</text>
							</text>
						</view>
					</view>

					<view class="operBtn">
						<u-row gutter="10">
							<u-col span="6">
								<u-button class="CommonBtnSize" type="primary" text="新增" @click="showAdd"></u-button>
							</u-col>
						</u-row>
					</view>

				</view>
			</template>
		</z-paging>

		<u-popup :show="showAddPop" :safeAreaInsetBottom="true" @close="closeAdd">
			<view :style="$utils.disposeSafeBottomFun()">
				<u--form labelPosition="left" :model="formData" labelWidth="100" :rules="rules" ref="uForm">
					<u-form-item label="检查日期" prop="CDate" borderBottom required @click="openDate('add')">
						<u--input :value="dateFormat(formData.CDate)" disabled disabledColor="#ffffff"
							placeholder="请选择检查日期" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="受检部门" prop="ClassName" borderBottom required @click="openBaseScreen('受检单位',1)">
						<u--input :value="formData.ClassName" disabled disabledColor="#ffffff" placeholder="请选择受检单位"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<view
					style="display: flex;align-items: center;justify-content: space-between;padding: 10px;column-gap: 20px;">
					<u-button type="info" color="#51d0d0" :plain="true" text="取消" @click="cancelAdd"></u-button>
					<u-button type="primary" color="#51d0d0" text="确认" @click="addCheck"></u-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showFilter" :safeAreaInsetBottom="true" @close="closePopUp">
			<view :style="$utils.disposeSafeBottomFun()">
				<u--form labelPosition="left" :model="searchData" labelWidth="100" ref="uForm2">
					<u-form-item label="开始日期" prop="startDate" borderBottom @click="openDate('filter',1)">
						<u--input :value="dateFormat(searchData.startDate)" disabled disabledColor="#ffffff"
							placeholder="请选择开始日期" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="结束日期" prop="endDate" borderBottom @click="openDate('filter',2)">
						<u--input :value="dateFormat(searchData.endDate)" disabled disabledColor="#ffffff"
							placeholder="请选择结束日期" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="受检部门" prop="ClassID" borderBottom @click="openBaseScreen('受检单位',2)">
						<u--input :value="searchData.ClassName" disabled disabledColor="#ffffff" placeholder="请选择受检单位"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
				<view
					style="display: flex;align-items: center;justify-content: space-between;padding: 10px;column-gap: 20px;">
					<u-button type="info" color="#51d0d0" :plain="true" text="重置" @click="resetSearch"></u-button>
					<u-button type="primary" color="#51d0d0" text="确认" @click="confirmSearch"></u-button>
				</view>
			</view>
		</u-popup>

		<u-datetime-picker ref="datetimePicker" :show="showDate" title="检查日期" v-model="currentDate" mode="date"
			:formatter="formatter" :closeOnClickOverlay="true" @confirm="confirmDate" @cancel="cancelDate"
			@close="cancelDate"></u-datetime-picker>
	</view>
</template>

<script>
	var dateOpen = '';
	var dateType = 0;
	var baseScreenType = 0;

	export default {
		data() {
			return {
				showAddPop: false, // 新建检查弹窗
				showDate: false,
				dateTitle: '',
				showFilter: false,
				titleName: '',
				currentDate: Number(new Date()),
				formData: {
					CDate: '',
					ClassID: 0,
					ClassName: ''
				},
				rules: {
					'CDate': {
						type: 'string',
						required: true,
						message: '请选择检查日期',
						trigger: ['blur', 'change']
					},
					'ClassName': {
						type: 'string',
						required: true,
						message: '请选择受检单位',
						trigger: ['blur', 'change']
					}
				},
				searchData: {
					pageIndex: 1,
					pageSize: 30,
					startDate: '',
					endDate: '',
					ClassID: 0,
					ClassName: ''
				},
				totalCount: 0,
				dataList: []
			};
		},
		created() {
			let that = this;
			let menu = that.$store.state.Menu;
			that.titleName = menu.APFunName;
		},
		mounted() {
			let that = this;
			uni.$on('CheckList_Choice', function(ret) {
				console.log(ret);
				if (ret.type == '受检单位') {
					if (baseScreenType == 1) {
						that.formData.ClassID = ret.data.CkUnitID;
						that.formData.ClassName = ret.data.CkUnitName;
					}
					if (baseScreenType == 2) {
						that.searchData.ClassID = ret.data.CkUnitID;
						that.searchData.ClassName = ret.data.CkUnitName;
					}
				}
			})
		},
		methods: {
			confirmSearch() {
				this.searchData.pageIndex = 1;
				this.searchData.pageSize = 30;
				this.searchData.startDate = this.dateFormat(this.searchData.startDate);
				this.searchData.endDate = this.dateFormat(this.searchData.endDate);
				// console.log(this.searchData);
				this.$refs.paging.reload();
				this.showFilter = false;
			},

			resetSearch() {
				this.searchData = {
					pageIndex: 1,
					pageSize: 30,
					startDate: '',
					endDate: '',
					ClassID: 0,
					ClassName: ''
				};
				this.$refs.paging.reload();
				this.showFilter = false;
			},

			closePopUp() {
				this.showFilter = false;
			},

			queryList(pageNo, pageSize) {
				let that = this;
				that.$utils.showLoading();
				that.searchData.pageIndex = pageNo;
				that.searchData.pageSize = pageSize;
				// console.log(that.searchData);
				that.Request.request('5S_GetDailyList', that.searchData, function(data) {
						console.log(data);
						that.$utils.hideLoading();
						that.$refs.paging.complete(data.data.ds);
						if (pageNo == 1) {
							that.totalCount = data.data.ds1[0]['@TotalCount'];
						}
					}, function(err) {
						this.$refs.paging.complete(false);
					}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
			// 新增5S检查
			addCheck() {
				let that = this;
				that.formData.CDate = that.dateFormat(that.formData.CDate);
				// console.log(that.formData);
				that.$refs.uForm.validate().then(res => {
					that.Request.request('5S_AddDailyDetail', that.formData, function(data) {
							let result = data.data;
							if (result.ds[0].status == 200) {
								that.formData = {
									CDate: Number(new Date()),
									ClassID: 0,
									ClassName: ''
								}
								uni.showToast({
									title: '新建成功',
									icon: 'success'
								})
								that.$refs.paging.reload();
							} else {
								uni.showToast({
									title: result.ds[0].msg,
									icon: 'error'
								})
							}
							that.showAddPop = false;
						}, function(err) {

						}, that.Request.IPAgreement() + that.Request.serverIP() +
						'/Frame/SqlData', 1)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 显示新建弹窗
			showAdd() {
				this.showAddPop = true;
			},
			// 关闭新建弹窗
			closeAdd() {
				this.showAddPop = false;
			},

			cancelAdd() {
				this.showAddPop = false;
			},

			openDate(param1, param2) {
				dateOpen = param1;
				if (param2) {
					dateType = param2;
				}
				if (param1 == 'add') {
					this.dateTitle = '检查日期';
					if (this.formData.CDate) {
						this.currentDate = this.formData.CDate;
					} else {
						this.currentDate = Number(new Date());
					}
				}
				if (param1 == 'filter') {
					if (param2 == 1) {
						this.dateTitle = '开始日期';
						if (this.searchData.startDate) {
							this.currentDate = this.searchData.startDate;
						} else {
							this.currentDate = Number(new Date());
						}
					}
					if (param2 == 2) {
						this.dateTitle = '结束日期';
						if (this.searchData.endDate) {
							this.currentDate = this.searchData.endDate;
						} else {
							this.currentDate = Number(new Date());
						}
					}
				}
				this.showDate = true;
			},
			confirmDate(date) {
				if (dateOpen == 'add') {
					this.formData.CDate = date.value;
				}
				if (dateOpen == 'filter') {
					if (dateType == 1) {
						this.searchData.startDate = date.value;
					}
					if (dateType == 2) {
						this.searchData.endDate = date.value;
					}
				}
				this.currentDate = date.value;
				this.showDate = false;
			},
			cancelDate() {
				this.currentDate = Number(new Date());
				this.showDate = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			dateFormat(val) { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					return that.Request.dateFormat(new Date(), 'Y-MM-dd');
				}
			},
			// 5S检查详情
			intoRow(row) {
				uni.navigateTo({
					url: '/st_5s/CheckDetail?DailyFSID=' + row.DailyFSID,
				})
			},
			// 选择责任人员
			openBaseScreen(str, type) {
				let obj = {};
				baseScreenType = type;

				if (str == '受检单位') {
					obj = {
						allowClear: false,
						cmd: '5S_getClass',
						type: str,
						ListeningName: 'CheckList_Choice',
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'SearchKey', //搜索关键词，应包含在param中
							showText: 'CkUnitName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'UserID',
							ChoiceDataData: this.formData.ClassID,
						},
						param: {
							SearchKey: '',
						}
					}
				}

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: '/commonPage/Tool/baseScreen'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-form {
		.u-form-item {
			background-color: #fff;
			padding: 0 16px;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f2f2f2;

		.icon-flip-vertical {
			display: inline-block;
			/* 或者其他适合你的布局的display值 */
			transform: scaleY(-1);
			/* 垂直翻转 */
		}

		uni-button {
			margin-left: initial !important;
			margin-right: initial !important;
		}

		.MainPopup {
			flex: initial !important;

			.PopupContent {
				display: flex;
				flex-direction: column;
				min-height: 240px;
				width: 90vw;
			}

			.u-transition {
				z-index: 99999 !important;
			}


			.PopupMainBox {
				padding: 12px 10px 6px;
				flex: 1;
				// overflow: auto;

				.CellBox {
					margin-bottom: 20px;

					.LeftBox {
						font-size: 14px;
						color: #999;
						margin-right: 10px;
					}
				}

				.uni-input-placeholder {
					color: #6a6a6a !important;
					font-size: 12px !important;
				}
			}

			.PopupBottomBox {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 10px 10px;

				.CancelBtn {
					background-color: #fff;
					color: #51d0d0;
					border: 1px solid #51d0d0;
					min-width: 80px;
				}

				.ComfirmBtn {
					background-color: #51d0d0;
					color: #fff;
					min-width: 80px;
					margin-left: 10px !important;
				}
			}
		}

		.MenuBoxMax {
			position: relative;
			height: 42px;
			width: 100%;
			border-bottom: 4px solid #f2f2f2;

			.MenuBox {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #fff;

				.selectSearchDom {
					padding-right: 10rpx;
				}
			}
		}

		.MainBox {
			// flex: 1;
			// overflow: auto;
			padding: 10rpx;

			// 表单1
			.u-form {
				// padding: 0px 10px;

				.u-form-item {
					background-color: #fff;
					padding: 0 16px;
				}


				.TopOption {

					.u-form-item__body {
						flex-direction: column !important;
					}
				}

				// 起止时间
				.ChoiceTimesBox {
					width: 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					// padding: 18px 10px;
					// margin-top: 10px;

					.TimeBox {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						.timer {
							width: 100%;
							flex: 2;
							display: flex;
							flex-direction: column;
							// align-items: center;
							font-size: 16px;
							color: #333;

							text:first-child {
								margin-bottom: 10px;
								font-weight: 600;
							}

							text:last-child {
								height: 20px;
							}
						}

						.Icon {
							flex: 1;
						}
					}
				}


				// 上传-删除图标
				.u-upload__deletable {
					width: 20px;
					height: 20px;

					.u-upload__deletable__icon {
						right: -1px !important;

						.u-icon__icon {
							font-size: 20px !important;
							line-height: 16px !important;
						}
					}
				}
			}
		}

		.BottomBox {
			width: 100%;
			// height: 70px;
			// line-height: 70px;
			padding: 6px 15px;
			border-top: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #fff;
			// padding-bottom: constant(safe-area-inset-bottom) !important;
			// padding-bottom: env(safe-area-inset-bottom) !important;
		}

		.moremenu {
			margin-right: 10rpx;
		}

		.search {
			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 10px;

			.scanQrCode {
				width: 20rpx;
				padding: 5rpx;
			}
		}

		.list {
			background-color: #999;
		}

		.bottomTool {
			background: #fff;
			padding: 10px;
			border-top: 2px solid #f2f2f2;
		}

		.operTotal {
			font-size: 14px;
			color: #333;
		}

		.operBtn {
			width: fit-content;
		}

		.FilterBox {
			flex: 1;

			.FiledBox {
				position: relative;

				&::after {
					position: absolute;
					box-sizing: border-box;
					content: ' ';
					pointer-events: none;
					right: 16px;
					bottom: 0;
					left: 16px;
					border-bottom: 1px solid #ebedf0;
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
				}

				&:last-child::after {
					border-bottom: none;
				}
			}
		}
	}
</style>